<template>
  <div id="globalSider">
    <a-layout-sider class="sider" width="200">
      <a-menu
        mode="inline"
        v-model:selectedKeys="current"
        :items="menuItems"
        @click="doMenuClick"
      />
    </a-layout-sider>
  </div>

</template>
<script lang="ts" setup>
//当前选中的导航栏选项
import { ref,h } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import router from '@/router'
import { UserOutlined,PictureOutlined } from '@ant-design/icons-vue'

const current = ref<string[]>([])
const menuItems = ref<MenuProps['items']>([
  {
    key: '/',
    label: '公共图库',
    title: '公共图库',
    icon: () => h(PictureOutlined),
  },
  {
    key: '/my_space',
    label: '我的空间',
    title: '我的空间',
    icon: () => h(UserOutlined),
  },
])

// 路由跳转事件
const doMenuClick = ({key}:{key:string}) => {
  router.push(
    {
      path:key,
    }
  )
}
// 监听路由变化，更新当前选中菜单
router.afterEach((to, from, failure) => {
  current.value = [to.path]
})
</script>
<style scoped>
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
